<template>
	<view class="wapper">
		<!-- 第一部分 -->
		<view class="top">
			<!-- 左边布局 -->
			<view class="userInfo">
				<!-- 手机号 -->
				<view class="fontWeight white">用户账号：{{userData.utell}}</view>
				<view class="uintegral mt20 white">用户积分：{{userData.uintegral}}</view>
				<view class="urole mt10 white">用户角色：{{userData.urole}}</view>
			</view>
			<!-- y用户头像 -->
			<image class="userImage" src="../../static/user.png"></image>
		</view>
		<!-- 第二部分 -->
		<view class="navData">
			<view @click="changeIndex(index)" class="nav" :class="currentIndex==index?'currentNav':''" v-for="(orderText,index) in navData">{{orderText}}</view>
		</view>
		
		<!-- 第三部分  显示订单信息-->
		<view class="orderData">
			<!-- 一个订单 -->
			<view class="order" v-for="order in orderData">
				<!-- 取一个商品的图片 -->
				<image :src="httpImageUrl+order.product[0].pimageurl" mode=""></image>
				<view class="orderDetail ml40">
					<!-- <view class="productDetail" v-for="product in order.product">
						<view>{{product.pname}}</view>
						<view class="ml40">￥{{product.tprice}}</view>
					</view> -->
					<view>创建时间：{{order.createtime}}</view>
					<view>订单总额：￥{{order.oprice}}</view>
					<view>支付状态：{{order.paystate+""=="2" ? (order.ostate+""==="2"?"已退订":"未支付") : (order.paystate+"" == "0" ? "未支付": order.ostate+""=="1"? "已收货": order.ostate+""=="0"?"待收货":"已支付")}}
						<!-- <view style="" id="pay-order-view"   v-if="currentIndex == 0 && order.ostate+'' == '2'">支付</view>
						<view style="" id="cancel-order-view" @click="cancelOrderByOId(order.id)"  v-if="currentIndex == 3 && order.ostate+'' == '2'">退订</view>
					 -->
						<view class="order-pay-rel" v-if="currentIndex == 0 && order.paystate+'' === '0'">
							<view class="cancelBtn" @click="cancelOrderByOId(order.id)">取消订单</view>
							<view class="submitBtn" @click="payOrder(order.uid,order.id)">去支付</view>
						</view>
						
						<!-- 确认收货 -->
						<view class="order-pay-rel" v-if="currentIndex+'' ==='2'">
							<view class="receiveBtn" @click="receive(order.uid,order.id)">确认收货</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData:{},
				navData:['全部订单','已收货','未收货','退订'],
				currentIndex:0,
				orderData:[],  //该用户的订单信息
				token:""
			}
		},
		onShow() {
			var that = this;
			//获取本地token
			uni.getStorage({
				key:"token",
				success(res){
					//发起请求,获取用户信息
					uni.request({
					    url: that.httpUserUrl+'user/queryUserInfo', //仅为示例，并非真实接口地址。
					    data: {
							token:res.data,
					    },
						header: {
						     'custom-header': 'application/json', //自定义请求头信息
							 'token':res.data
						},
					    success: (reqResult) => {
							console.log("获取用户信息，",reqResult.data.data)
							that.userData = reqResult.data.data;
							that.token = res.data
					    }
					});
				}
			})
			
			
			//发起请求,获取订单信息
			uni.getStorage({
				key:"token",
				success(res){
					uni.request({
					    url: that.httpUrl+'order/queryOrder', //仅为示例，并非真实接口地址。
					    data: {
							ostate:'',
							token:res.data,
					    },
						header: {
						     'custom-header': 'application/json', //自定义请求头信息
							 'token':res.data
						},
					    success: (reqResult) => {
							console.log("获取订单信息，",reqResult.data.data);
							that.orderData = reqResult.data.data;
					    }
					});
				}
			})
			
			
		},
		methods: {
			// 顶部栏目的切换
			changeIndex(index){
				var that = this;
				that.currentIndex = index;
				//发起请求  0：预定中（未收货） 1：已收货 2：退订 3：禁用
				var ostate = '';
				if(index==0){// 查询全部订单
					ostate = ''
				}else if(index==1){// 已收获
					ostate = '1'
				}else if(index==2){//未收获
					ostate = '0'
				}else if(index==3){// 退订
					ostate = '2'
				}
				
				console.log("订单token",that.token)
				//发起请求,获取订单信息
				uni.request({
				    url: that.httpUrl+'order/queryOrder', //仅为示例，并非真实接口地址。
				    data: {
						token:that.token,
						ostate: ostate
				    },
					header: {
					     'custom-header': 'application/json', //自定义请求头信息
						 'token': that.token,
					},
				    success: (reqResult) => {
						console.log("获取订单信息，",reqResult.data.data)
						that.orderData = reqResult.data.data
				    }
				});
			},
			// 取消订单
			cancelOrderByOId(oid){
				var that = this;
				//发起请求,获取订单信息
				uni.request({
				    url: that.httpUrl+'order/cancelOrder', //仅为示例，并非真实接口地址。
				    data: {
						token:that.token,
						id: oid
				    },
					method: 'POST',
					header: {
					     'custom-header': 'application/json', //自定义请求头信息
						  'token': that.token,
					},
				    success: (reqResult) => {
						console.log("订单取消信息，",reqResult.data.data)
						uni.showToast({
							title: reqResult.data.msg,
							icon: reqResult.data.code.toString() === '0' ? 'success':'error',
							duration: 1500
						});
						that.changeIndex(3);// 重新加载退订的订单列表
				    }
				});
			},
			// 支付功能
			payOrder(uid,oid){
				var that = this;
				// 发起请求，确认订单
				uni.request({
					url: that.httpUrl+'order/pay',
					data: {
						uid: uid,
						id: oid
					},
					method:'POST',
					header: {
						 'custom-header': 'application/json', //自定义请求头信息
						 'token': that.token,
					},
					success: (reqResult) => {
						console.log("订单取消信息，",reqResult.data.data)
						uni.showToast({
							title: reqResult.data.code===0 ? '支付成功':reqResult.data.msg,
							icon: reqResult.data.code.toString() === '0' ? 'success':'error',
							duration: 1500
						});
						that.changeIndex(2);// 重新加载退订的订单列表
					}
				})
			},
			
			// 支付功能
			receive(uid,oid){
				var that = this;
				// 发起请求，确认订单
				uni.request({
					url: that.httpUrl+'order/receive',
					data: {
						uid: uid,
						id: oid
					},
					method:'POST',
					header: {
						 'custom-header': 'application/json', //自定义请求头信息
						 'token': that.token,
					},
					success: (reqResult) => {
						console.log("订单取消信息，",reqResult.data.data)
						uni.showToast({
							title: reqResult.data.code===0 ? '支付成功':reqResult.data.msg,
							icon: reqResult.data.code.toString() === '0' ? 'success':'error',
							duration: 1500
						});
						that.changeIndex(1);// 重新加载退订的订单列表
					}
				})
			}
		}
	}
</script>

<style>
	/* 第一部分 */
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 100rpx 40rpx;
		background-color: orange;
		align-items: center;
	}
	.userImage{
		width:100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.uintegral,.urole{
		color: #999;
	}
	.wapper{
		background-color: #f5f5f5;
	}
	/* 第二部分 */
	.navData{
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		margin-top: 60rpx;
	}
	.nav{
		padding: 10rpx;
	}
	.currentNav{
		/* border-bottom: 1px solid #333333; */
		border-bottom: 2px solid pink;
	}
	
	/* 第三部分 */
	.orderData{
		padding: 0 40rpx;
		margin-top: 40rpx;
		padding-bottom: 80rpx;
	}
	.order{
		display: flex;
		margin-top: 20rpx;
		border-bottom: 1px solid #999;
		padding-bottom: 20rpx;
	}
	.order image{
		width: 260rpx;
		height: 160rpx;
	}
	.productDetail{
		display: flex;
	}
	#pay-order-view,#cancel-order-view{
		margin-left: 40rpx;
		display: inline-block;
		background-color: pink;
		border-radius: 14rpx;
		width: 110rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		font-weight: bold;
		cursor: pointer;
	}
	.order-pay-rel{
		display: flex;
		text-align: center;
		align-items: center;
		height: 50px;
		/* align-content: center; */
	}
	.cancelBtn{
		background-color: #999;
		border-radius: 14rpx;
		width: 200rpx;
		height: 50rpx;
		font-size: 35rpx;
		margin-right: 10rpx;
	}
	.submitBtn{
		background-color: yellow;
		border-radius: 14rpx;
		width: 200rpx;
		height: 50rpx;
		font-size: 35rpx;
		font-weight: bolder;
		color: red;
		/* margin-right: 100rpx; */
	}
	.receiveBtn{
		background-color: yellow;
		border-radius: 14rpx;
		width: 200rpx;
		height: 50rpx;
		margin-left:200rpx;
		font-size: 35rpx;
		font-weight: bolder;
		color: red;
	}
</style>
